<template>
  <div id="customerDetails" class="customerDetails">
	  <group class="customerGroupDetails">
		  <cell value-align="left">
			  <img slot="icon" width="60" style="display:block;margin-right:5px;border-radius:20px" src="../../../../assets/profile/default_header.svg">
			  <span style="font-size: 15px;font-weight: bold;">{{name.substring(0,3)}}（{{age}}）</span><span v-if="status == false" class="tagClass">{{ tag }}</span>
			  <x-button style="padding: 0 8px;float:right; border: solid 0.5px; border-color: gold" mini @click.native="jumpToEdit">编辑</x-button>
			  <x-button style="padding: 0 8px;float:right;margin-right: 5px;margin-top: 0px;border: solid 0.5px; border-color: gold"mini @click.native="newLesson">排课</x-button>
			  <div style="margin-top: 10px;font-size: 13px;"><span>{{nickname}}</span></div>
		  </cell>
		  <!--<cell :title="name" :inline-desc="nickname" class="customerDetailsTitle" >
			  <img slot="icon" width="60" style="display:block;margin-right:5px;border-radius:20px" src="../../../../assets/profile/default_header.svg">
			  <flexbox>
				  <flexbox-item v-if="status == false">
					  <span class="tagClass">{{ tag }}</span>
				  </flexbox-item>
				  <flexbox-item>
					  <x-button mini @click.native="jumpToEdit">编辑</x-button>
				  </flexbox-item>
				  <flexbox-item>
					  <x-button mini @click.native="newLesson">排课</x-button>
				  </flexbox-item>
			  </flexbox>

		  </cell>-->
	  </group>

	  <button-tab class="customerDetailsTab" v-model="index">
		  <button-tab-item :selected="demo === item" v-for="(item, index) in detailList" @click="demo = item" :key="index">{{ item }}</button-tab-item>
	  </button-tab>

    <div v-if="index === 0" >
      <customer-details-home></customer-details-home>
    </div>
	  <div v-else-if="index === 1">
		  <customer-details-tracing :id="id"></customer-details-tracing>
	  </div>
    <div v-else-if="index === 2">
      <customer-lesson-contract :id="id"></customer-lesson-contract>
    </div>
	  <div v-else-if="index === 3">
		  <customer-details-lesson :id="id"></customer-details-lesson>
	  </div>
	  <div v-else-if="index === 4">
		  <customer-details-lesson-feedback :id="id"></customer-details-lesson-feedback>
	  </div>
  </div>
</template>

<script>
	import bus from '@/event/eventBus'
	import DateUtil from '../../../../utils/date'
	import NetWorking from '../../../../utils/networking'
  import customerDetailsHome from './customerDetailsHome'
	import customerDetailsTracing from './customerDetailsTracing'
	import customerDetailsLesson from './customerDetailsLesson'
	import customerDetailsLessonFeedback from './customerDetailsLessonFeedback'
  import customerLessonContract from './customerSignedLesson'

  import { Group, Cell, ButtonTab, ButtonTabItem, Divider, XButton,Flexbox,FlexboxItem } from 'vux'

  const list = () => ['基本信息', '动态', '剩余课时', '课程活动', '教师反馈']

  export default {
    name: "customer-details",
    components: {
	    Group,
      Cell,
      ButtonTab,
      ButtonTabItem,
      Divider,
	    XButton,
      customerDetailsHome,
	    customerDetailsTracing,
      customerLessonContract,
	    customerDetailsLesson,
	    customerDetailsLessonFeedback,
	    Flexbox,
	    FlexboxItem
    },
    data () {
      return {
      	id: this.$route.params.id,
        detailList: list(),
        demo: '详细信息',
        index: 0,
        name: '',
	      nickname: '',
	      age: '',
        item: '',
	      status: 'true',
	      tag: ''
      }
    },
	  beforeRouteLeave(to, from, next){
		  //存储当前页面信息
		  this.$store.commit('CREATE_URL_PARAMS', {name: from.name, params: this.index})
		  next()
	  },
    created: function () {
	    bus.$emit("userDefinedEvent", 1)
	    bus.$emit("barController", 1)
	    bus.$emit("setTopSimpleTitle", '学员详情')

	    this.$store.commit('FETCH_URL_PARAMS')
	    if(this.$store.state.user.urlParamsMap !=null && this.$store.state.user.urlParamsMap["customerDetails"] != null){
		    this.index = this.$store.state.user.urlParamsMap["customerDetails"].params
	    }

      let _this = this
	    var url = 'customers/' + this.$route.params.id
	    NetWorking.doGet(
		    url,
		    null,
		    null
	    ).then(
	    	response => {
	    		let rs = response.data
			    if(rs.error_code == 0){
				    _this.name = rs.customer.name
				    if(rs.customer.nickname == null){
				    	_this.nickname = '小名：无'
				    }else{
					    _this.nickname = '小名：' + rs.customer.nickname
				    }

				    _this.age = DateUtil.getAge(rs.customer.birthday)
				    _this.age += '岁'

				    _this.status = rs.customer.status
				    _this.tag = rs.customer.tag
			    }else{
				    alert(rs.error_message)
			    }
		    }
	    )
    },
    methods: {
	    jumpToEdit: function () {
		    this.$router.push({name: 'updateCustomer', params: {id: this.id}})
	    },
	    newLesson: function () {
		    this.$router.push({name: 'newLesson', params: {name: this.name, id: this.id}})
	    }
    }
  }
</script>

<style>
	.customerDetailsTitle > .weui-cell__ft{
		text-align: left;
	}

	.tagClass {
		display: inline-block;
		margin-left: 5px;
		padding: 0 3px;
		font-size: 13px;
		background: yellowgreen;
		color: white;
		border-radius: 5px;
	}

  .customerDetails {
    margin-top: 44px;
  }

  .customerDetailsTab{
	  margin-left: 5px;
	  margin-right: 5px;
	  margin-top: 5px;
  }

  .customerGroupDetails > .weui-cells {
	  z-index: 99;
  }

  .customerGroupDetails > .weui-cells:after {
	  border-bottom: none;
  }

  .customerDetailsTab > .vux-button-tab-item {
	  z-index: 99;
  }

  .vux-button-group > a.vux-button-tab-item-first:after{
	  border: 1px solid black !important;
  }

  .vux-button-group > a.vux-button-tab-item-middle:after {
	  border: 1px solid black !important;
  }

  .vux-button-group > a.vux-button-tab-item-last:after {
	  border: 1px solid black !important;
  }

  .vux-button-group > a.vux-button-group-current {
	  background: orange;
  }

</style>
